<template>
	<div class="role-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
		<div class="top">
			<el-select v-model="searchInfo.storeId" size="small" style="width: 120px">
				<el-option v-for="item in purchaselist" :key="item.storeId" :label="item.storeName" :value="item.storeId"> </el-option>
			</el-select>
			<div class="block">
				<span>开始时间：</span>
				<el-date-picker v-model="startTime" type="date" placeholder="选择日期" size="small"> </el-date-picker>
				<span>结束时间：</span>
				<el-date-picker v-model="endTime" type="date" placeholder="选择日期" size="small"> </el-date-picker>
			</div>
			<el-input v-model="searchInfo.productName" placeholder="商品名称" size="small" clearable style="width: 120px"></el-input>
			<el-input v-model="searchInfo.buyUser" placeholder="采购人" size="small" clearable style="width: 120px"></el-input>
			<el-select v-model="searchInfo.isIn" placeholder="请选择" size="small" style="width: 120px">
				<el-option label="不生成入库单" :value="0">不生成入库单</el-option>
				<el-option label="生成入库单" :value="1">生成入库单</el-option>
			</el-select>
			<el-button type="primary" style="margin-left: 30px; width: 100px" icon="el-icon-search" @click="handleQuery">查询</el-button>
			<el-button icon="el-icon-search" style="margin-left: 30px; width: 100px" size="small" @click="reset">重 置</el-button>
		</div>
		<div class="btn-div">
			<el-button type="warning" icon="el-icon-upload2" @click="exportClick">导出数据</el-button>
		</div>
		<div class="talb_div">
			<el-table :data="dataList" border @selection-change="handleSelectionChange" style="margin-top: 10px" table-layout="auto" size="large" stripe>
				<el-table-column type="selection" width="50"> </el-table-column>
				<el-table-column type="index" width="50"> </el-table-column>
				<el-table-column prop="storeName" label="仓库名" width="180"> </el-table-column>
				<el-table-column prop="productName" label="商品名" width="180"> </el-table-column>
				<el-table-column prop="buyNum" label="预计采购数量" width="200"> </el-table-column>
				<el-table-column prop="factBuyNum" label="实际采购数量" width="200"> </el-table-column>
				<el-table-column prop="buyUser" label="采购人" width="180"> </el-table-column>
				<el-table-column prop="buyTime" label="采购时间" width="180"> </el-table-column>
				<el-table-column prop="phone" label="采购电话" width="180"> </el-table-column>
				<el-table-column label="入库状态" width="180">
					<!-- <template slot-scope="scope">{{ scope.row.userState == 1 ? '启用' : '禁用' }}</template> -->
					<template #default="scope"
						><span :class="{ red: scope.row.isIn == 0, green: scope.row.isIn == 1 }">{{ scope.row.isIn == 1 ? '已入库' : '未入库' }}</span></template
					>
				</el-table-column>
				<el-table-column label="操作" width="300"
					><template slot-scope="scope">
						<template v-if="scope.row.factBuyNum == 0 || !scope.row.factBuyNum">
							<el-button @click="handleEdit(scope.row)" size="small" type="primary" icon="el-icon-edit" circle></el-button>
							<el-button @click="handleDelete(scope.row)" size="small" type="danger" icon="el-icon-delete" circle></el-button>
						</template>
						<template v-if="scope.row.isIn == 0 && scope.row.factBuyNum > 0">
							<el-button size="small" type="primary" @click="instore(scope.row)">生成入库单</el-button>
						</template>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page_nation">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum"
				:page-sizes="[10, 20, 30, pageInfo.totalNum]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.totalNum"
			>
			</el-pagination>
		</div>

		<!-- 弹窗 -->
		<el-dialog title="修改采购单" :visible.sync="isEditShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form :model="formEditInfo" :rules="rules" ref="form" label-width="120px">
					<el-form-item label="采购单号" prop="buyId" size="small">
						<el-input v-model="formEditInfo.buyId" disabled></el-input>
					</el-form-item>
					<el-form-item label="仓库" prop="storeName" size="small">
						<el-input v-model="formEditInfo.storeName" disabled></el-input>
					</el-form-item>
					<el-form-item label="商品名称" prop="productName" size="small">
						<el-input v-model="formEditInfo.productName" disabled></el-input>
					</el-form-item>
					<el-form-item label="预计采购数量" prop="buyNum" size="small">
						<el-input v-model="formEditInfo.buyNum"></el-input>
					</el-form-item>
					<el-form-item label="实际采购数量" prop="factBuyNum" size="small">
						<el-input v-model="formEditInfo.factBuyNum"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isEditShow = false">取 消</el-button>
					<el-button type="primary" @click="handleEditEnter('form')">确 定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { exportExcel } from 'excel-tools/dist/main.es.js';
export default {
	data() {
		return {
			loading: false,
			exportData: [],
			searchInfo: {
				storeId: 1,
				startTime: '',
				endTime: '',
				productName: '',
				buyUser: '',
				isIn: '',
			},
			pageInfo: {
				pageSize: 10,
				pageNum: 1,
				totalNum: 0,
			},
			purchaselist: [],
			dataList: [],
			formEditInfo: {
				buyId: 0,
				storeName: '',
				productName: '',
				buyNum: 0,
				factBuyNum: 0,
			},
			form: {
				buyId: 0,
				storeName: '',
				productName: '',
				buyNum: 0,
				factBuyNum: 0,
			},
			rules: {
				buyNum: [{ required: true, message: '请输入预计采购数量', trigger: 'blur' }],
				factBuyNum: [{ required: true, message: '请输入实际采购数量', trigger: 'blur' }],
			},
			isEditShow: false,
		};
	},
	methods: {
		getList() {
			this.loading = true;
			this.$http
				.get('/purchase/purchase-page-list', {
					params: {
						...this.searchInfo,
						...this.pageInfo,
					},
				})
				.then((res) => {
					const {
						code,
						data: { pageSize: one, pageNum, resultList, totalNum },
					} = res;
					if (code == 200) {
						this.dataList = resultList;
						this.pageInfo.totalNum = totalNum;
						this.pageInfo.pageSize = one;
						this.pageInfo.pageNum = pageNum;
						console.log('data', res.data);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		//查询
		handleQuery() {
			if (this.searchInfo.roleCode.length || this.searchInfo.roleName.length || this.searchInfo.roleState.length) {
				this.getList();
			} else {
				this.$message.warning('筛选条件不能为空');
			}
		},
		reset() {
			this.searchInfo = {
				roleCode: '',
				roleName: '',
				roleState: '',
			};
			this.getList();
		},
		//获取选取框
		handleSelectionChange(selection, row) {
			this.exportData = [...selection];
			this.exportData.forEach((item) => {
				this.$set(item, 'isIn', item.isIn == 0 ? '未入库' : '已入库');
			});
			console.log(selection);
		},
		//生成入库单
		instore(row) {
			this.$http
				.post('/purchase/in-warehouse-record-add', {
					...row,
					roleState: row.isIn == 1 ? '0' : '1',
				})
				.then((res) => {
					if (res.code == 200) {
						this.getList();
						this.$message.success('修改成功');
					}
				});
		},
		//修改
		handleEdit(row) {
			this.formEditInfo.buyId = row.buyId;
			this.formEditInfo.storeName = row.storeName;
			this.formEditInfo.productName = row.productName;
			this.formEditInfo.buyNum = row.buyNum;
			this.formEditInfo.factBuyNum = row.factBuyNum;
			this.isEditShow = true;
		},
		handleEditEnter(form) {
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.$http.put('/purchase/purchase-update', this.formEditInfo).then((res) => {
						const { code, data } = res;
						if (code == 200) {
							this.isEditShow = false;
							this.getList();
							this.$message.success('添加成功');
						}
					});
				} else {
					console.log('验证失败');
					return false;
				}
			});
		},
		//删除
		handleDelete(row) {
			// const userId = row.userId;
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.$http.delete(`/purchase/purchase-delete/${row.buyId}`).then((res) => {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.getList();
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		//页码
		handleSizeChange(size) {
			this.pageInfo.pageSize = size;
			this.getList();
		},
		handleCurrentChange(current) {
			this.pageInfo.pageNum = current;
			this.getList();
		},
		//导出表格
		exportClick() {
			exportExcel({
				fileName: '采购列表',
				header: [
					{
						key: 'storeName',
						header: '仓库名',
						width: 25,
					},
					{
						key: 'productName',
						header: '商品名',
						width: 24,
					},
					{
						key: 'buyNum',
						header: '预计采购数量',
						width: 23,
					},
					{
						key: 'factBuyNum',
						header: '实际采购数量',
						width: 25,
					},
					{
						key: 'buyUser',
						header: '采购人',
						width: 25,
					},
					{
						key: 'buyTime',
						header: '采购时间',
						width: 24,
					},
					{
						key: 'phone',
						header: '采购电话',
						width: 23,
					},
					{
						key: 'isIn',
						header: '入库状态',
						width: 23,
					},
				],
				content: this.exportData, // 导出的数据
			});
		},
	},
	created() {
		//拿到用户下拉菜单
		this.$http.get('/purchase/store-list').then((res) => {
			const { code, data } = res;
			code == 200 && (this.purchaselist = data);
		});
		this.getList();
	},
};
</script>

<style lang="less" scoped>
.top {
	display: flex;
}
.red {
	color: red;
}
.green {
	color: green;
}
</style>
